<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./zepto.js"></script>
    <script src="./md5.js"></script>
</head>

<body>

    <ul>
        <li>
            <a href="#/">turn white</a>
        </li>
        <li>
            <a href="#/blue">turn blue</a>
        </li>
        <li>
            <a href="#/green">turn green</a>
        </li>
    </ul>

    <script>
        // var passwd = $.md5('https://www.cmd5.com/');
        // console.log(passwd);

        function Router() {
            this.routes = {};
            this.currentUrl = '';
        }
        Router.prototype.route = function(path, callback) {
            this.routes[path] = callback || function() {};
        };
        Router.prototype.refresh = function() {
            this.currentUrl = location.hash.slice(1) || '/';
            this.routes[this.currentUrl]();
        };
        Router.prototype.init = function() {
            window.addEventListener('load', this.refresh.bind(this), false);
            window.addEventListener('hashchange', this.refresh.bind(this), false);
        }
        window.Router = new Router();
        window.Router.init();
    </script>
    <script>
        var content = document.querySelector('body');
        // change Page anything
        function changeBgColor(color) {
            content.style.backgroundColor = color;
        }
        Router.route('/', function() {
            changeBgColor('white');
        });
        Router.route('/blue', function() {
            changeBgColor('blue');
        });
        Router.route('/green', function() {
            changeBgColor('green');
        });
    </script>
</body>

</html>